<template>
  <div class="batch-booking-area">
    <div class="middle">
      <bread-crumb class="bread-crumb-padding" :list="breadCrumb"></bread-crumb>
      <div class="top-area">
        <input
          v-model.trim="search"
          type="text"
          class="search"
          placeholder="请输入关键字搜索新闻"
          maxlength="50"
          @keyup.enter="getList"
        />
        <div class="tab-list flx-row-s-c">
          <router-link
            class="item"
            v-for="(item, index) in tabList"
            :key="index"
            :class="{
              'b-r': index < tabList.length - 1,
              active: item.id == active,
            }"
            :to="`/newsl?tab=${item.id}`"
          >
            {{ item.name }}
          </router-link>
        </div>
      </div>
      <div class="flx-row-bw-s">
        <div class="left-area">
          <Spin :withIcon="true" v-if="loading"></Spin>
          <div class="list-area">
            <div
              class="news-item flx-row-bw-s"
              v-for="(item, index) in list"
              :key="item.id"
            >
              <div
                class="image"
                v-lazy:background-image="item.imgUrl"
                @click="toDetail(item.id)"
              ></div>
              <div class="item-right-area">
                <h3 class="title" @click="toDetail(item.id)">
                  {{ item.title }}
                </h3>
                <p class="intro" style="margin-bottom: 10px">
                  {{ item.subTitle }}
                </p>
                <span class="f-14 c-g" style="margin-right: 20px"
                  >发布时间：{{ item.releaseTime.substr(0, 16) }}</span
                >
                <span class="f-14 c-g">浏览次数：{{ item.views }}</span>
              </div>
            </div>
          </div>
          <Empty-State
            style="background-color: #fff"
            v-if="total != null && total == 0"
            content="未搜索到任何内容！"
          ></Empty-State>
          <div class="w-p-100 flx-row-e-c" style="margin-top: 30px">
            <Page
              :total="total"
              :current="page"
              :page-size="pageSize"
              :page-size-opts="pageSizeOpts"
              @on-change="pageChange"
              @on-page-size-change="pageSizeChange"
              show-elevator
              show-sizer
              show-total
            />
          </div>
        </div>
        <div class="news-right-area">
          <div class="box" style="margin-bottom: 24px">
            <div class="flx-row-bw-c title-top">
              <span class="f-16 c-d2">阅读排序榜</span>
              <div class="select-area flx-row-s-c">
                <div
                  class="item"
                  :class="[
                    rankingListSelect == 0 ? 'item-active' : 'item-normal',
                  ]"
                  @click="changeRankingSelect(0)"
                >
                  周
                </div>
                <div
                  class="item"
                  :class="[
                    rankingListSelect == 1 ? 'item-active' : 'item-normal',
                  ]"
                  @click="changeRankingSelect(1)"
                >
                  月
                </div>
              </div>
            </div>
            <div class="list-bottom">
              <div
                class="item flx-row-s-c"
                v-for="(item, index) in rankingList"
                :key="index"
                @click="toDetail(item.id)"
              >
                <div class="list-index" :class="[index < 3 ? 'top' : 'bottom']">
                  {{ index + 1 }}
                </div>
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
          <div class="box">
            <div class="flx-row-bw-c title-top">
              <span class="f-16 c-d2">相关推荐</span>
            </div>
            <div class="list-bottom">
              <div
                class="item flx-row-s-c"
                v-for="(item, index) in recommendList"
                :key="index"
                @click="toDetail(item.id)"
              >
                <span>{{ item.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  getNewsType,
  getNewsList,
  getNewsRanking,
  getNewsRecommend,
} from "@/api/data";
export default {
  name: "newsList",
  data() {
    return {
      loading: false,
      breadCrumb: [{ name: "新闻资讯", to: "/newsl?tab=0" }],
      tabList: [],
      active: 0,
      search: "",

      // 分页设置
      total: null,
      pageSizeOpts: [10, 50, 100, 200],
      pageSize: 10,
      page: 1,
      list: [],

      // 右侧栏信息
      rankingListSelect: 0,
      rankingList: [],
      recommendList: [],
    };
  },
  watch: {
    "$route.query.tab": {
      immediate: true,
      handler(newValue) {
        if (newValue && !isNaN(newValue)) this.active = newValue;
        if (this.active == null || this.active == "") {
          if (this.tabList.length > 0) {
            this.active = this.tabList[0].id;
            this.page = 1;
            this.getList();
          }
        } else {
          this.page = 1;
          this.getList();
        }
      },
    },
  },
  created() {
    this.getNewsType();
    this.getNewsRanking();
    this.getNewsRecommend();
  },
  methods: {
    changeRankingSelect(index) {
      if (this.rankingListSelect == index) return;
      this.rankingListSelect = index;
      this.getNewsRanking();
    },
    // 获取资讯类型
    async getNewsType() {
      let res = await getNewsType();
      if (res.code == 200) {
        this.tabList = res.data;
        if (this.active == null || this.active == "") {
          if (this.tabList.length > 0) {
            this.active = this.tabList[0].id;
            this.getList();
          }
        }
      }
    },
    // 切换页码
    pageChange(page) {
      this.page = page;
      this.getList();
      window.scrollTo(0, 0);
    },
    // 切换pageSize
    pageSizeChange(pageSize) {
      this.pageSize = pageSize;
      this.pageChange(1);
    },
    // 获取列表
    async getList() {
      this.loading = true;
      let params = {
        kw: this.search,
        typeId: this.active,
        limit: this.pageSize,
        page: this.page,
      };
      let res = await getNewsList(params);
      if ((res.code = 200)) {
        this.list = res.data.list;
        this.total = res.data.total;
      }
      this.loading = false;
    },
    // 跳转到详情
    toDetail(id) {
      window.open(`/newsd?id=${id}`, "_blank");
      // this.$router.push({
      //   name: 'newsd',
      //   query: {
      //     id: id
      //   }
      // })
    },
    // 获取阅读排行榜
    async getNewsRanking() {
      let res = await getNewsRanking({
        dateType: this.rankingListSelect,
      });
      if (res.code == 200) {
        this.rankingList = res.data;
      }
    },
    // 获取阅读推荐
    async getNewsRecommend() {
      let res = await getNewsRecommend();
      if (res.code == 200) {
        this.recommendList = res.data;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.batch-booking-area {
  background-color: #f7f7f7;
  padding-bottom: 20px;

  .top-area {
    background-color: #fff;
    padding: 25px 24px 40px;
    width: 100%;
    box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
    margin-bottom: 20px;

    .search {
      @include size(100%, 40px);
      background-color: #fff;
      padding-left: 43px;
      padding-right: 15px;
      @include bg-setting("search", 16px 16px, 20px center);
      box-shadow: 0px 0px 14px 2px rgba(0, 16, 36, 0.06);
      border-radius: 20px;
      margin-bottom: 30px;
    }

    .tab-list {
      border: 1px solid #dcdcdc;
      height: 40px;
      width: fit-content;

      .item {
        width: 200px;
        text-align: center;
        line-height: 38px;
        font-size: 16px;
        @include h-c(#fff, #f9521f, #1b1b1b, #fff);
        cursor: pointer;
      }
      .b-r {
        border-right: 1px solid #dcdcdc;
      }
      .active {
        background-color: #f9521f;
        color: #fff;
      }
    }
  }
  .left-area {
    width: 828px;
    padding: 14px 20px 35px;
    background-color: #fff;
    position: relative;
    box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);
    .list-area {
      min-height: 185px;

      .news-item {
        padding: 24px;
        border-bottom: 1px solid #dcdcdc;

        .image {
          @include bg-setting(null, cover, center);
          @include size(205px, 138px);
          background-color: #ededed;
          transition: opacity 0.3s;
          cursor: pointer;

          &:hover {
            opacity: 0.8;
          }
        }

        .item-right-area {
          width: 515px;

          .title {
            @include h-c(null, null, #1b1b1b, #f9521f);
            cursor: pointer;
            font-weight: 600;
            @include f-ell-sin;
            font-size: 16px;
            margin-bottom: 10px;
          }

          .intro {
            font-size: 14px;
            font-weight: 600;
            color: #585858;
            word-break: break-all;
            @include f-ell-mul(3);
            height: 63px;
          }
        }
      }
    }
  }
  .news-right-area {
    width: 348px;

    .box {
      background-color: #fff;
      box-shadow: 0px 0px 11px 2px rgba(0, 16, 36, 0.02);

      .title-top {
        padding: 0 24px;
        height: 55px;
        border-bottom: #f9521f solid 1px;

        .select-area {
          background-color: #eeeeee;
          border-radius: 8px;

          .item {
            @include size(34px, 30px);
            text-align: center;
            line-height: 30px;
            font-size: 14px;
            border-radius: 8px;
          }
          .item-active {
            background-color: #f9521f;
            color: #fff;
          }
          .item-normal {
            @include h-c(#eeeeee, null, #898989, #f9521f);
            cursor: pointer;
          }
        }
      }

      .list-bottom {
        padding: 0 24px 36px;
        background-color: #fff;

        .item {
          border-bottom: #001024;
          height: 58px;
          font-size: 14px;
          border-bottom: #dcdcdc solid 1px;
          cursor: pointer;

          .list-index {
            @include size(34px);
            border-radius: 50%;
            color: #fff;
            margin-right: 25px;
            flex-shrink: 0;
            text-align: center;
            line-height: 34px;
            &.top {
              background-color: #f9521f;
            }
            &.bottom {
              background-color: #5b5b5b;
            }
          }
          span {
            width: 100%;
            @include f-ell-sin;
            color: #1b1b1b;
            transition: color 0.3s;
          }
          &:hover span {
            color: #f9521f;
          }
        }
      }
    }
  }
}
</style>